<template>
    <el-drawer v-model="visible" :direction="rtl">
    <template #header>
      <h4>{{title}}</h4>
    </template>
    <template #default>
        <div style="height: calc(100vh - 200px);max-height: calc(100vh - 200px);overflow: auto;">
            <JsonViewer :value="content" expand-depth="10"/>
        </div>
    </template>
  </el-drawer>
</template>

<script setup>
import {ref} from 'vue'
import { JsonViewer } from "vue3-json-viewer"
import "vue3-json-viewer/dist/vue3-json-viewer.css";

const props = defineProps({
    title: String,
})

const visible = ref(false)
const open = (jsonStr) => {
    formatJson(jsonStr);
    visible.value = true;
}

defineExpose({
    open
})


const content = ref('')
const formatJson = (jsonStr) => {
    content.value =  JSON.parse(jsonStr)
}
</script>